<template>
	<div class="staff">

		<!--顶部搜索栏-->
		<section class="head">
			<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
			<el-input placeholder="请输入您想搜索用户的姓名" v-model="seachObj.user.username"></el-input>
			<el-select v-model="seachObj.user.department" placeholder="请选择用户的部门" :disabled='status'>
				<el-option v-for="item in department" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-date-picker type="date" placeholder="选择日期" v-model="seachObj.user.startDate">
			</el-date-picker>
			<el-button type="primary" @click="dialogFormVisible1=true" icon="el-icon-plus">新增员工</el-button>
		</section>

		<!--侧边栏-->
		<aside-item :userid="userMessage.userid" :username="userMessage.username"></aside-item>

		<!--用户表格-->
		<el-table :data="staff_list" border style="width: 60%;font-size: 13px;margin-top: 60px;float: left;">
			<el-table-column label="员工信息表" align="center">
				<el-table-column label="用户id" prop="userid" align="center" v-if="showCol">
				</el-table-column>
				<el-table-column prop="userid" label="工号" align="center">
				</el-table-column>
				<el-table-column prop="username" label="姓名" align="center">
				</el-table-column>
				<el-table-column prop="department" label="部门" align="center">
				</el-table-column>
				<el-table-column prop="post" label="职位" align="center">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-edit" size="mini" title="编辑" @click="userEdit(scope.row.userid)"></el-button>
						<el-button type="primary" icon="el-icon-view" size="mini" title="查看" @click="userDetail(scope.row.userid)"></el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" title="删除" @click="deleteUser(scope.row.userid,scope.$index, scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>

		</el-dialog>

		<el-dialog title="新增用户" :visible.sync="dialogFormVisible1" top="100px" width="1000px">
			<el-form :model="userInfo" :rules="rules">
				<el-form-item>
					<img :src="userInfo.userimg" v-if="status"/>
				</el-form-item>
				<el-form-item>
					<el-upload class="avatar-uploader" action="1" :show-file-list="true" :before-upload="importexcel" :auto-upload="false" :on-exceed="handleExceed" ref="userInfoform" :limit="1" list-type="picture-card" accept=".jpg,.png">
					</el-upload>
				</el-form-item>
				<el-form-item prop="username">
					<span>姓名：</span>
					<el-input v-model="userInfo.username">
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<span>密码：</span>
					<el-input v-model="userInfo.password">
					</el-input>
				</el-form-item>
				
				<el-form-item prop="sex">
					<span>性别：</span>
					<el-select v-model="userInfo.sex" placeholder="请选择">
						<el-option v-for="item in sex" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="department">
					<span>部门：</span>
					<el-select v-model="userInfo.department" placeholder="请选择" :disabled='status'>
						<el-option v-for="item in department" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item prop="userid">
					<span>工号：</span>
					<el-input v-model="userInfo.userid">
					</el-input>
				</el-form-item>
				<el-form-item prop="userid">
					<span>身份证号：</span>
					<el-input v-model="userInfo.number">
					</el-input>
				</el-form-item>
				<el-form-item prop="telephone">
					<span>电话：</span>
					<el-input v-model="userInfo.telephone">
					</el-input>
				</el-form-item>
				<el-form-item prop="post">
					<span>职位：</span>
					<el-select v-model="userInfo.post" placeholder="请选择" :disabled='status'  @change="bindSalary">
						<el-option v-for="item in job" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					</el-input>
				</el-form-item>
				<el-form-item prop="type">
					<span>职位类型：</span>
					<el-select v-model="userInfo.type" placeholder="请选择" @change='bindJobType'>
						<el-option v-for="item in job_type" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="salary">
					<span>基本工资：</span>
					<el-input v-model="userInfo.salary">
					</el-input>
				</el-form-item>
				<el-form-item prop="startDate">
					<span>入职日期：</span>
					<el-date-picker v-model="userInfo.startDate" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item prop="birthday">
					<span>生日：</span>
					<el-date-picker v-model="userInfo.birthday" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="newSubmitForm()">确 定</el-button>
					<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="用户信息" :visible.sync="dialogFormVisible2" top="100px" width="1000px">
			<el-form :model="staff_detail" :rules="rules">
				<el-form-item>
					<img :src="staff_detail.userimg" v-if="status"/>
				</el-form-item>
				<el-form-item>
					<el-upload v-if="!status" class="avatar-uploader" action="1" :show-file-list="true" :before-upload="importexcel1" :auto-upload="false" :on-exceed="handleExceed" ref="userInfoform1" :limit="1" list-type="picture-card" accept=".jpg,.png">
					</el-upload>
				</el-form-item>
				<el-form-item prop="username">
					<span>姓名：</span>
					<el-input v-model="staff_detail.username" :disabled='status'>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<span>密码：</span>
					<el-input v-model="staff_detail.password" :disabled='status'>
					</el-input>
				</el-form-item>
				
				<el-form-item prop="sex">
					<span>性别：</span>
					<el-select v-model="staff_detail.sex" placeholder="请选择" :disabled='status'>
						<el-option v-for="item in sex" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="department">
					<span>部门：</span>
					<el-select v-model="staff_detail.department" placeholder="请选择" :disabled='status'>
						<el-option v-for="item in department" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item prop="userid">
					<span>工号：</span>
					<el-input v-model="staff_detail.userid" :disabled='status'>
					</el-input>
				</el-form-item>
				<el-form-item prop="telephone">
					<span>电话：</span>
					<el-input v-model="staff_detail.telephone" :disabled='status'>
					</el-input>
				</el-form-item>
				<el-form-item prop="post">
					<span>职位：</span>
					<el-select v-model="staff_detail.post" placeholder="请选择" :disabled='status'>
						<el-option v-for="item in job" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					</el-input>
				</el-form-item>
				<el-form-item prop="type">
					<span>职位类型：</span>
					<el-select v-model="staff_detail.type" placeholder="请选择" :disabled='true'>
						<el-option v-for="item in job_type" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="salary">
					<span>基本工资：</span>
					<el-input v-model="staff_detail.salary" :disabled='status'>
					</el-input>
				</el-form-item>
				<el-form-item prop="startDate">
					<span>入职日期：</span>
					<el-date-picker v-model="staff_detail.startDate" type="date" placeholder="选择日期" :disabled='status'>
					</el-date-picker>
				</el-form-item>
				<el-form-item prop="birthday">
					<span>生日：</span>
					<el-date-picker v-model="staff_detail.birthday" type="date" placeholder="选择日期" :disabled='status'>
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="newSubmitForm1()">确 定</el-button>
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<div class="pagination">
			<el-pagination background @current-change="handleCurrentChange" :page-size="seachObj.pageSize" :current-page.sync="seachObj.page" layout="prev, pager, next, jumper,total" :total="totalNum">
			</el-pagination>
		</div>
	</div>

</template>

<script>
	import asideItem from "../../common/asideblock"
	import { mapState, mapMutations } from 'vuex';
	export default {
		name: 'staff',

		components: {
			asideItem
		},

		data() {
			return {
				staff_list: [],

				staff_detail: {
					birthday: '',
					department: '',
					endDate: '',
					id: '',
					number: '',
					password: '',
					post: '',
					salary: '',
					sex: '',
					startDate: '',
					telephone: '',
					type: '',
					userid: '',
					userimg: '',
					username: '',
				},

				staff_salary: {
					userid: '',
					username: '',
					early: '0',
					late: '0',
					overtime: '0',
					fine: '0',
					finereason: '',
					awardaddition: '0',
					awardreason: ''
				},

				staff_performance: {
					userid: '',
					username: '',
					early: '0',
					late: '0',
					overtime: '0'
				},

				img_status: false,

				status: false,

				showCol: false,

				seachObj: {
					user: {
						//						username:'',
						//						userid:'',
						//						startDate:'',
						//						sex:''
					},
					page: 1,
					pageSize: 5
				},

				seachObj1: {
					depart: {
						//						username:'',
						//						userid:'',
						//						startDate:'',
						//						sex:''
					},
					page: 1,
					pageSize: 5
				},

				department: [],

				sex: [{
					value: '男',
					label: '男'
				}, {
					value: '女',
					label: '女'
				}],

				job_type: [{
					value: '1',
					label: '正式'
				}, {
					value: '0',
					label: '实习'
				}],

				userInfo: {
					salary: '',
					endDate: '',
					startDate: '',
					userid: '',
					type: '',
					department: '',
					post: '',
					telephone: '',
					number: '',
					birthday: '',
					sex: '',
					password: '',
					username: '',
					root:'1'
				},

				rules: {
					username: [{
						required: true,
						message: '请选择员工名称',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入员工密码',
						trigger: 'blur'
					}],
					sex: [{
						required: true,
						message: '请选择员工性别',
						trigger: 'change'
					}],
					birthday: [{
						required: true,
						message: '请输入员工生日',
						trigger: 'blur'
					}],
					telephone: [{
						required: true,
						message: '请输入员工电话',
						trigger: 'blur'
					}],
					post: [{
						required: true,
						message: '请输入员工职位',
						trigger: 'blur'
					}],
					department: [{
						required: true,
						message: '请选择员工部门',
						trigger: 'change'
					}],
					type: [{
						required: true,
						message: '请选择员工类型',
						trigger: 'change'
					}],
					userid: [{
						required: true,
						message: '请输入员工工号',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请输入员工入职时间',
						trigger: 'blur'
					}],
					salary: [{
						required: true,
						message: '请输入员工薪资',
						trigger: 'blur'
					}],
				},
				
				job:[],

				value: '',

				value2: '',

				dialogFormVisible1: false,

				dialogFormVisible2: false,

				totalNum: '',

				imageUrl: '',
				userMessage:{
					username:'',
					userid:''
				},
				value1: ''
			}
		},
		mounted() {
			this.getData();
			this.getDepart();
			this.getJobList();
			this.getLoginUser();
		},
		methods: {

			getData() {
				var vm = this;
				vm.$http.post(this.API.FINDALLUSER, JSON.stringify(vm.seachObj), this.API.HEADER).then((res) => {
					vm.staff_list = res.data.data.data;
					vm.totalNum = res.data.total;
					vm.loading = false;
				})
			},
			
			getLoginUser(){
				this.userMessage.username=decodeURI(this.$route.query.username);
				this.userMessage.userid=this.$route.query.userid;
			},

			deleteUser(id, index, row) {
				var vm = this;
				this.$confirm('确认删除？')
					.then(_ => {
						vm.$http.post(this.API.DELETEUSER, JSON.stringify({
							userid: id
						}), this.API.HEADER).then((res) => {
							if(res.data.message == "success") {
								vm.$message({
									showClose: true,
									message: '刪除成功'
								});
								vm.deleteSalary(id);
								vm.deleteGrade(id);
								vm.getData();
							}
						})
					})
			},
			
			deleteSalary(id) {
				var vm = this;
						vm.$http.post(this.API.DELETEPERFORMANCE, JSON.stringify({
							userid: id
						}), this.API.HEADER).then((res) => {
							if(res.data.message == "success") {
								vm.$message({
									showClose: true,
									message: '刪除成功'
								});
								vm.getData();
							}
						})
			},
			
			deleteGrade(id) {
				var vm = this;
						vm.$http.post(this.API.DELETESALARY, JSON.stringify({
							userid: id
						}), this.API.HEADER).then((res) => {
							if(res.data.message == "success") {
								vm.$message({
									showClose: true,
									message: '刪除成功'
								});
								vm.getData();
							}
							})
			},
			
			
			getJobList(id){
				var vm = this;
				vm.$http.post(this.API.FINDALLJOB, JSON.stringify(vm.seachObj1), this.API.HEADER).then((res) => {
					vm.job = res.data.data.data;
					for(var i = 0; i < vm.job.length; i++) {
						vm.job[i].label = vm.job[i].jobname;
						vm.job[i].value = vm.job[i].jobname;
						vm.job[i].jobid=vm.job[i].jobid;
					}
				})
			},
			
			getJobDetail(id){
				var vm = this;
				vm.$http.post(this.API.JOBDETAIL, JSON.stringify({jobid:id}), this.API.HEADER).then((res) => {
					vm.userInfo.salary=res.data.data.data;
				})
			},
			
			userDetail(id) {
				var vm = this;
				vm.status = true;
				vm.$http.post(this.API.FINDONEUSER, JSON.stringify({
					userid: id
				}), this.API.HEADER).then((res) => {
					vm.staff_detail = res.data.data.data;
					vm.staff_detail.birthday = res.data.data.data.birthday;
					vm.staff_detail.department = res.data.data.data.department;
					vm.staff_detail.endDate = res.data.data.data.endDate;
					vm.staff_detail.id = res.data.data.data.id;
					vm.staff_detail.number = res.data.data.data.number;
					vm.staff_detail.password = res.data.data.data.password;
					vm.staff_detail.post = res.data.data.data.post;
					vm.staff_detail.salary = res.data.data.data.salary;
					vm.staff_detail.sex = res.data.data.data.sex;
					vm.staff_detail.startDate = res.data.data.data.startDate;
					vm.staff_detail.telephone = res.data.data.data.telephone;
					vm.staff_detail.type = res.data.data.data.type;
					vm.staff_detail.userid = res.data.data.data.userid;
					vm.staff_detail.userimg = "http://localhost:8080/img/" + res.data.data.data.userimg + ".png";
					vm.staff_detail.username = res.data.data.data.username;
					vm.dialogFormVisible2 = true;
				})
			},

			userEdit(id) {
				var vm = this;
				vm.userDetail(id);
				vm.status = false;
			},
			
			bindSalary(id){
				var vm = this;
				vm.$http.post(this.API.FINDJOBSALARY, JSON.stringify({jobname:id}), this.API.HEADER).then((res) => {
					vm.userInfo.salary = res.data.data.data.salary;
					vm.userInfo.type=res.data.data.data.type;
				})
			},
			
			bindJobType(id){
				var vm=this;
				if(id=="0"){
					vm.userInfo.salary = "2000";
				}else{
					vm.bindSalary(vm.userInfo.job);
				}
			},
			
			//	    上传照片
			importexcel(file) {
				var vm = this;
				vm.loading = true;
				let formData = new FormData();
				if(vm.userInfo.startDate != "" && vm.userInfo.birthday != "") {
					vm.userInfo.startDate = vm.dateFormat(vm.userInfo.startDate);
					vm.userInfo.birthday = vm.dateFormat(vm.userInfo.birthday);
				}
				formData.append('fileimg', file);
				formData.append("username", vm.userInfo.username);
				formData.append("password", vm.userInfo.password);
				formData.append("sex", vm.userInfo.sex);
				formData.append("birthday", vm.userInfo.birthday);
				formData.append("number", vm.userInfo.number);
				formData.append("telephone", vm.userInfo.telephone);
				formData.append("post", vm.userInfo.post);
				formData.append("department", vm.userInfo.department);
				formData.append("type", vm.userInfo.type);
				formData.append("userid", vm.userInfo.userid);
				formData.append("startDate", vm.userInfo.startDate);
				formData.append("salary", vm.userInfo.salary);
				formData.append("endDate", "2018-02-26");
				formData.append("root", "1");
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				};

				vm.$http.post(this.API.USERADD, formData, this.API.HEADER).then((res) => {
					if(res.data.message == "success") {
						vm.$message({
							showClose: true,
							message: '添加成功'
						});
						vm.staff_salary.userid = vm.userInfo.userid;
						vm.staff_salary.username = vm.userInfo.username;
						vm.staff_salary.base = vm.userInfo.salary;
						vm.staff_performance.userid = vm.userInfo.userid;
						vm.staff_performance.username = vm.userInfo.username;
						vm.insertUsersalary();
						vm.insertUserperformance();
						vm.getData();
						vm.dialogFormVisible1 = false;
						vm.loading = false;
					}
				})

			},

			//	    修改照片
			importexcel1(file) {
				var vm = this;
				vm.loading = true;
				let formData = new FormData();
				formData.append('fileimg', file);
				formData.append("id", vm.staff_detail.id);
				formData.append("username", vm.staff_detail.username);
				formData.append("password", vm.staff_detail.password);
				formData.append("sex", vm.staff_detail.sex);
				formData.append("birthday", vm.staff_detail.birthday);
				formData.append("number", vm.staff_detail.number);
				formData.append("telephone", vm.staff_detail.telephone);
				formData.append("post", vm.staff_detail.post);
				formData.append("department", vm.staff_detail.department);
				formData.append("type", vm.staff_detail.type);
				formData.append("userid", vm.staff_detail.userid);
				formData.append("startDate", vm.staff_detail.startDate);
				formData.append("endDate", vm.staff_detail.endDate);
				formData.append("salary", vm.staff_detail.salary);
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				};
				vm.$http.post(this.API.UPDATEUSER, formData, this.API.HEADER).then((res) => {
					if(res.data.message == "success") {
						vm.$message({
							showClose: true,
							message: '修改成功'
						});
						vm.dialogFormVisible2 = false;
					}
				})
			},
			newSubmitForm() {
				var vm = this;
				if(vm.userInfo.username == '' || vm.userInfo.password == '' || vm.userInfo.sex == '' || vm.userInfo.birthday == '' || vm.userInfo.telephone == '' || vm.userInfo.post == '' ||
					vm.userInfo.department == '' || vm.userInfo.type == '' || vm.userInfo.userid == '' || vm.userInfo.startDate == '' || vm.userInfo.salary == '') {
					vm.$message({
						showClose: true,
						message: '请检查是否所有数据都已填写',
						type: 'error'
					});
				} else {
					this.$refs.userInfoform.submit();
				}
			},
			newSubmitForm1() {
				var vm = this;
				if(vm.staff_detail.username == '' || vm.staff_detail.password == '' || vm.staff_detail.sex == '' || vm.staff_detail.birthday == '' || vm.staff_detail.telephone == '' || vm.staff_detail.post == '' ||
					vm.staff_detail.department == '' || vm.staff_detail.type == '' || vm.staff_detail.userid == '' || vm.staff_detail.startDate == '' || vm.staff_detail.salary == '') {
					vm.$message({
						showClose: true,
						message: '请检查是否所有数据都已填写',
						type: 'error'
					});
				} else {
					this.$refs.userInfoform1.submit();
				}
			},
			handleExceed(files, fileList) {
				this.$message.warning(`一次只能上传一个头像`);
			},

			insertUsersalary() {
				var vm = this;
				vm.$http.post(this.API.INSERTSALARY, JSON.stringify(vm.staff_salary), this.API.HEADER).then((res) => {})
			},

			insertUserperformance() {
				var vm = this;
				vm.$http.post(this.API.INSERTPERFORMANCE, JSON.stringify(vm.staff_performance), this.API.HEADER).then((res) => {})
			},

			getDepart() {
				var vm = this;
				vm.$http.post(this.API.FINDALLDEPART, JSON.stringify(vm.seachObj1), this.API.HEADER).then((res) => {
					vm.department = res.data.data.data;
					for(var i = 0; i < vm.department.length; i++) {
						vm.department[i].label = vm.department[i].departname;
						vm.department[i].value = vm.department[i].departname;
					}
				})
			},

			handleCurrentChange(val) {
				var vm = this;
				vm.seachObj.page = val;
				vm.getData();
			},
			//日期格式化yy-mm-dd
			dateFormat(date) {
				var date=new Date(date);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				if(month < 10) {
					month = "0" + month;
				}
				if(day < 10) {
					day = "0" + day;
				}
				return year + '-' + month + '-' + day;
			},
			search() {
				var vm = this;
				vm.seachObj.page = 1;
				vm.getData();
			}

		}
	}
</script>

<style lang="scss" scoped>
	#staff {
		width: 60%;
		margin: 50px auto;
		.el-table {
			width: 70%;
			margin-left: 5%;
			float: left;
		}
	}
	.el-table{
		border-radius: 10px;
		padding-bottom: 10px;
	}
	.head {
		margin: 0 auto;
		margin-top: 50px;
		padding-bottom: 20px;
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #e6e6e6;
		.el-input {
			width: 20%;
			float: right;
			margin-left: 10px;
		}
		.el-data-picker {
			width: 20%;
			float: right;
		}
		.el-select {
			width: 20%;
			float: right;
			margin-left: 10px;
		}
		.el-button {
			float: right;
			margin: 0 50px 0 10px;
		}
	}
	
	.el-dialog {
		.el-form {
			width: 80%;
			margin: 0 auto;
			.el-form-item {
				width: 45%;
				display: inline-block;
				span {
					width: 25%;
					display: inline-block;
					height: 20px;
					line-height: 20px;
					text-align: right;
				}
			
				.el-input {
					width: 70%;
					display: inline-block;
				}
				.el-select {
					width: 70%;
					display: inline-block;
				}
			}
			.el-form-item:first-child {
				width: 80%;
				margin: 15px auto;
				display: block;
				img{
					width: 150px;
					height: 150px;
					display: block;
					border-radius: 50%;
					margin: 0 auto 20px;
				}
			}
			.el-form-item:nth-child(2){
				width: 40%;
				margin: 15px auto;
				display: block;
				.el-upload{
					margin-left: 25px;
				}
			}
			.el-form-item:last-child{
				width: 80%;
				display: block;
			}
		}
	}
	
	.pagination {
		width: 100%;
		height: 24px;
		margin: 5% 0;
		font-size: 12px;
		text-align: right;
		float: right;
	}
</style>